<template>
  <div class="info-box">
    <div class="info">
      <div class="btn">
        <el-button @click="showEdit">
          修改密码
        </el-button>
      </div>
      <el-descriptions title="个人资料" border>
        <el-descriptions-item
            :rowspan="2"
            :width="140"
            label="头像"
            align="center"
            label-align="center"
        >
          <el-image
              style="width: 100%; height: 100%"
              :src="image"
          />
        </el-descriptions-item>
        <el-descriptions-item
            label="用户名"
            label-align="center"
            align="center"
        >
          {{userInfo.username}}
        </el-descriptions-item>
        <el-descriptions-item
            label="电话"
            label-align="center"
            align="center"
        >
          18000000000
        </el-descriptions-item>
        <el-descriptions-item
            label="部门"
            label-align="center"
            align="center"
        >
          <el-tag v-if="userInfo.role === 1">
            测试部门1
          </el-tag>
          <el-tag v-else-if="userInfo.role === 2">
            测试部门2
          </el-tag>
          <el-tag v-else-if="userInfo.role === 3">
            测试部门3
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item
            label="权限等级"
            label-align="center"
            align="center"
        >
          <el-tag size="small" v-if="userInfo.root === 0" type="warning">
            超级管理员
          </el-tag>
          <el-tag size="small" v-if="userInfo.root === 1" type="success">
            管理员
          </el-tag>
          <el-tag size="small" v-if="userInfo.root === 2">
            普通用户
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item
            label="地址"
            label-align="center"
            align="center"
        >
          测试数据
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="charts">
      <div id="main"></div>
    </div>
  </div>
  <el-dialog
      v-model="isEditShow"
      title="修改密码"
      width="500"
      :close-on-click-modal="false"
      before-close="cancel"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="新密码">
        <el-input v-model="form.newPW" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ElDescriptions, ElDescriptionsItem, ElImage, ElTag, ElButton, ElDialog} from "element-plus"
import {nextTick, onMounted, reactive, ref} from "vue"
import {createMSG, getLocalStorage} from "@/utils/common/common"
import superAdmin from "@/assets/images/user-avatar/superAdmin.jpeg"
import Admin from "@/assets/images/user-avatar/admin.jpeg"
import users from "@/assets/images/user-avatar/users.jpg"
import * as echarts from 'echarts';
import {editPassword} from "@/api/User"

let userInfo= getLocalStorage()
const image = ref(users)
const isEditShow = ref(false)
const form = reactive({
  newPW:''
})

onMounted(()=>{
  nextTick(()=>{
    if (userInfo.root === '0'){
      image.value = superAdmin
    } else if (userInfo.root === '1'){
      image.value = Admin
    } else if (userInfo.root === '2'){
      image.value = users
    }
  })
  initCharts()
})

let chartDom,myChart,option
const initCharts = () => {
  chartDom = document.getElementById('main');
  myChart = echarts.init(chartDom);
  option = {
    title:{
      text:'飞行数据统计',
      left:'45%'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      top:60,
      data: [
        '接警事件',
        '侦查事件',
        '联合行动',
        '无人机1',
        '无人机2',
        '无人机3',
        '无人机4',
        '无人机5',
        '无人机6',
      ]
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],
        label: {
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1548, name: '接警事件'},
          { value: 775, name: '侦查事件'},
          { value: 679, name: '联合行动', selected: true}
        ]
      },
      {
        name: '飞行时间(h)',
        type: 'pie',
        radius: ['45%', '60%'],
        labelLine: {
          length: 30
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: [
          { value: 1048, name: '无人机1' },
          { value: 335, name: '无人机2' },
          { value: 310, name: '无人机3' },
          { value: 251, name: '无人机4' },
          { value: 147, name: '无人机5' },
          { value: 102, name: '无人机6' }
        ]
      }
    ]
  }
  option && myChart.setOption(option);
}

const showEdit = () => {
  isEditShow.value = true
}

const onSubmit = async () => {
  try {
    const {data:res} = await editPassword(
        {
          name:userInfo.name,
          password:form.newPW
        }
    )
    if (res.code === 200){
      isEditShow.value = false
      form.newPW = ''
      createMSG('操作成功!','success',true)
    } else {
      isEditShow.value = false
      form.newPW = ''
      createMSG('操作失败!','error',true)
    }
  } catch (e) {
    console.log(e)
  }
}


const cancel = () => {
  isEditShow.value = false
  form.newPW = ''
}
</script>

<style scoped lang="less">
.info-box{
  width: 100%;
  height: 95%;
  padding-top: 2vh;
  padding-left: 1vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .info{
    width: 50%;
    .btn{
      position: absolute;
      left: 10vw;
      top: 16vh;
    }
  }
  .charts{
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    #main{
      height: 100%;
      width: 100%;
    }
  }
}
</style>
